<template>
  <div class="navBody">
    <div class="navBox">
      <div class="logoBox">
        <img class="logo" :alt="'新盛合环保设备有限公司'+','" :src="logoPath">
      </div>
      <div class="navContent">
        <el-menu :default-active="activeIndex" :active-text-color="'#e92322'" class="el-menu-demo" mode="horizontal" @select="handlePageSelect">
           <el-menu-item v-for="(item,ind) in navList" v-show="item.uniName!='my'" :key="ind" :index="ind.toString()">{{ t(item.i18n) }}</el-menu-item>
        </el-menu>
      </div>
      <div class="loginBox">
        <el-menu :default-active="myIndex" :active-text-color="'rgb(20, 108, 208)'" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleLoginSelect">
          <el-sub-menu index="7" v-if="showUser">
            <template #title>
              <div class="loginInfoBox" @click.native="toLogin">
                <span class="logoIcon"><span class="iconfont xinshenghelogo-1 logo"></span></span>
                <span class="loginInfo">{{ '欢迎，'+(currentUser && currentUser.nickName?currentUser.nickName.substr(0,1)+'**':currentUser.name.substr(0,1)+'**') }}</span>
              </div>
            </template>
            <el-menu-item  index="logOut" @click="loginout">{{t('message.loginOut')}}</el-menu-item>
          </el-sub-menu>

          <el-menu-item :index="!currentUser.nickName?'8':'9'" v-else>
            <template #title>
              <div class="loginInfoBox" @click.native="toLogin">
                <span class="logoIcon"><span class="iconfont xinshenghelogo-1 logo"></span></span>
                <span class="loginInfo">{{ t('message.login')}}</span>
              </div>
            </template>
          </el-menu-item>

        </el-menu>
      </div>
      
    </div>

    <ContentLogin ref="loginDialog" :language="language" @resetLogin="resetLogin" @closeLogin="closeLogin"></ContentLogin>
    
  </div>

</template>

<script lang="ts" setup>
import { ref, onBeforeMount, onMounted,onBeforeUpdate, onUnmounted,watch, getCurrentInstance } from 'vue'

//引入i18n
import { useI18n } from 'vue-i18n'

const {t}=useI18n()

import {throwError} from 'element-plus/es/utils/error.mjs'
const nuxtApp:any=useNuxtApp()

//引入路由
const route=useRoute()
const navList=[
  {
    name:'首页',
    path:'/',
    i18n:'message.index',
    uniName:'index',
  },
  {
    name:'公司介绍',
    path:'/company/detail',
    i18n:'message.company',
    uniName:'company',
  },
  {
    name:'产品中心',
    path:'/product/list/1',
    i18n:'message.product',
    uniName:'product',
  },
  {
    name:'新闻中心',
    path:'/news/list/1',
    i18n:'message.news',
    uniName:'news',
  },
  {
    name:'视频中心',
    path:'/video/list/1',
    i18n:'message.video',
    uniName:'video',
  },
  {
    name:'联系我们',
    path:'/connect/detail',
    i18n:'message.connect',
    uniName:'connect',
  },
  {
    name:'个人中心',
    path:'/my/detail',
    i18n:'message.my',
    uniName:'my',
  },
  
]

const {proxy}:any=getCurrentInstance()

//监听
const props=defineProps({
  language:{
    type:String,
    default:'Zh'
  }
})
watch(()=>proxy.language,(newVal)=>{
  // console.log("language--: ",newVal);
},{immediate:true,deep:true}
)

const $emit=defineEmits<{
  (e:string,value:any):void
}>()

const activeIndex = ref('0')
const myIndex = ref('')
const loginDialog:any=ref(null)

//1.获取用户信息
let showUser=ref(false)

const currentUser=ref({name:'',nickName:'',token:''})

async function getUser(){
  // console.log("--------------更新用户状态")
  // currentUser.value={}
  if(currentUser.value){
    showUser.value=true
  }else{
    showUser.value=false
  }
}
// console.log("currentUser========",currentUser)

const handlePageSelect = (key: any, keyPath: any) => {
  // console.log("页面改变：",key, keyPath);
  
  activeIndex.value=key.toString()
  // console.log("activeIndex: ",activeIndex.value);
  //nuxt自带跳转
  // navigateTo('/news/list/'+key)
  let num=1
  switch(activeIndex.value){
    case '0':
      navigateTo('')
      break;
    case '1':
      navigateTo('/company/detail')
      break;
    case '2':
      navigateTo('/product/list/'+num)
      break;
    case '3':
      navigateTo('/news/list/'+num)
      break;
    case '4':
      navigateTo('/video/list/'+num)
      break;
    case '5':
      navigateTo('/connect/detail')
      break;
    default:
      navigateTo('')
  }
  
}
const handleLoginSelect = (key: any, keyPath: any) => {
  // console.log(key, keyPath);
  // console.log("myIndex: ",myIndex);
  if(key[0]=='8'){
    // console.log("前往登录");
    loginDialog.value.initLogin()
    
  }else if(key[0]=='9'){
    // console.log("登出");
    loginout()
  }
  
}

const closeLogin=(user:any)=>{
  // console.log("关闭登录框");
  loginDialog.value.closeLogin()
  if(user){
    currentUser.value=user
    showUser.value=true
    // console.log("currentUser: ",currentUser)
    // console.log("currentUser: ",currentUser.value.nickName)
  }
  
  proxy.$emit('userData',user) 
}

const logoPath='imgs/header/logo-600-150.png'


//前往登录
const toLogin=()=>{
  // currentUser=localCache.local.get('user')
  // console.log("前往登录");
  // if(!currentUser){
  //   $emit('toLogin','')
  // }
  
}

async function loginout(){
  // let token=localCache.local.get('user').token || ''
  
  const {data,error,status}=await Logout(currentUser.value?.token || '')

  if(process.server && error.value){
    throwError((error.value?.data,error.value?.data.error+': '+error.value?.data.status),'页面加载失败，请联系客服！')

  }

  if(!data.value.responseMsg){
    nuxtApp.$message('success','退出登录成功')
    currentUser.value={name:'',nickName:'',token:''}
    showUser.value=false
    nuxtApp.$openUrl({index:'/'})
  }else{
    nuxtApp.$message('error',data.value.responseMsg)
  }
  
}

//改变现实user
const changeShowUser=(show:boolean)=>{
  showUser.value=show
 
}

const matchNav=()=>{
  let routeName:any=route.name
  // console.log("routeName: ",routeName)
  // let indexName= navList.findIndex((n:any)=>{routeName.indexOf(n.uniName)})
  navList.map((item,index)=>{
    if(routeName.indexOf(item.uniName)!=-1){
      // console.log("index-item: ",item)
      activeIndex.value=index.toString()
    }
  })
  // console.log("activeIndex.value: ",activeIndex.value)

}

matchNav()

function resetLogin(){
  
}

</script>

<style lang="scss" scoped>
@import '@/assets/css/common.scss';
@import '@/assets/css/index.scss';
//头部导航
.navBody {
  width: 100%;
  display: flex;
  background-color: hsla(0,0%,98%,.9);
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 5px 20px 0 rgba(0,0,0,.3);
  .navBox {
    width: 100%;
    height: 100%;
    padding: 0 80px 0 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex:1;
    .logoBox {
      width: 240px;
      height: 60px;
      padding: 5px 30px 5px 0;
      .logo{
        width: 100%;
        height: 100%;
      }
    }
    .navContent {
      width: calc(100% - 390px);
      :deep(.el-menu) {
        border-bottom:unset;
        background-color: unset;
      }
      :deep(.el-menu--horizontal) {
        height: 100%;
        width: 100%;
      }
      :deep(.el-menu-item.is-active) {
        color:#777 !important;
        border-bottom: 5px solid var(--el-menu-active-color);
      }

      :deep(.el-menu-item) {
        line-height: unset;
        padding-top:20px;
        padding-bottom: 20px;
        font-size: 18px;
        color: #777;
      }
      
    }
    .loginBox {
      width: 195px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      :deep(.el-menu) {
        border-bottom:unset;
        background-color: unset;
      }
      :deep(.el-menu--horizontal) {
        height: 100%;
        width: 100%;
      }
      :deep(.el-sub-menu__title) {
        line-height: unset;
        border-bottom:unset;
      }
      :deep(.el-sub-menu__title) {
        background-color: unset !important;
      }
      .loginInfoBox{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        
      }
      .logoIcon{
        // width: 22px;
        // height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: $lightBlue;
        font-weight: 500;
        border: 1px solid $lightBlue;
        border-radius: 50%;
        height:24px; 
        width:24px;
        margin-left: -2px;
        // &:before{
        //   position: absolute;
        //   top:0;
        //   left:18px;
        // }
        .logo{
          font-size: 16px;
        }
      }
      .loginInfo{
        color: #777 !important;
        padding-left: 10px;
      }

    }

  }
}
</style>